<!--  -->
<template>
    <div
        class="filebar">
        <div class="icon">
            <!-- :style="{ height: height + 'px' }" -->
            <!-- <van-icon
                name="label"
                color="#6ACE48"/> -->
            <!-- <van-image
                fit="scale-down"
                width="24"
                height="24"
                src="https://img.yzcdn.cn/vant/cat.jpeg"
            /> -->
            <van-image
                :src="require('../../assets/enclosure.svg')"
                :width="32"
                :height="32"
            >
            </van-image>
        </div>
        <div class="name">{{ file.filename }}</div>
        <div class="button">
            <slot
                name="button"
                :file="file">
                <a
                    :download="file.filename"
                    :href="url"
                    style="color:black">{{$st('wp_download')}}</a>
            </slot>
        </div>
    </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount } from 'vue';
import { apiService } from '@/api/apiService';

import { capiGetCommonFile } from '@/api/server';
export default {
    name: '',
    props: {
        file: Object,
        height: {
            type: Number,
            default: 32
        }
    },
    setup (props) {
        const state = reactive({
            url: ''
        });

        const download = () => {
            if (props.file.fileurl) {
                state.url = props.file.fileurl;
            } else {
                apiService({
                    api: capiGetCommonFile,
                    param: {
                        bucketname: 'ncmaintain',
                        filename: props.file.filename,
                        md5name: props.file.md5name,
                        protocol: 'https'
                    },
                    success: data => {
                    //  window.open(data.value.fileurl);
                        state.url = data.value.fileurl;
                    }
                });
            }
        };
        onBeforeMount(() => {
            download();
        });
        return {
            download,
            ...toRefs(state)
        };
    }
};
</script>
<style lang='scss' scoped>
.filebar {
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 6px;
  min-height: 32px;
  font-size: 13px;
  line-height: 18px;
  padding: 4px 0;
}
.icon {
  box-sizing: border-box;
  height: 100%;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.name {
    flex-grow: 1;
    text-align: left;
    margin-right: 8px;
    width: 100%;
    overflow: hidden;  //超出文本隐藏
    text-overflow: ellipsis;  ///超出部分省略号显示
    display: -webkit-box;  //弹性盒模型
    -webkit-box-orient: vertical;  //上下垂直
    -webkit-line-clamp: 2;  //自定义行数
}
.button {

  min-width: 40px;
}
</style>
